import Hljs from 'highlight.js'
// import 'highlight.js/styles/atom-one-dark-reasonable.css'
// import 'highlight.js/styles/googlecode.css'
// import 'highlight.js/styles/shades-of-purple.css'
const Highlight = {
  install: Vue => {
    Vue.directive('highlight', {
      // 被绑定元素插入父节点时调用
      inserted: function(el) {
        const blocks = el.querySelectorAll('pre code')
        for (let i = 0; i < blocks.length; i++) {
          Hljs.highlightBlock(blocks[i])
        }
      },
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
      componentUpdated: function(el) {
        const blocks = el.querySelectorAll('pre code')
        for (let i = 0; i < blocks.length; i++) {
          Hljs.highlightBlock(blocks[i])
        }
      }
    })
  }
}

export default Highlight
